Angular-এ কম্পোনেন্টে টেম্পলেট এবং স্টাইলস মূলত ইউজার ইন্টারফেস (UI) তৈরি করতে ব্যবহৃত হয়। কম্পোনেন্টের টেম্পলেটের মাধ্যমে HTML রেন্ডারিং এবং স্টাইলসের মাধ্যমে সেই HTML এর ডিজাইন কাস্টমাইজ করা হয়। Angular আপনাকে টেম্পলেট এবং স্টাইলস এর মধ্যে ডাইনামিক কনটেন্ট এবং ডিজাইন ম্যানিপুলেট করতে সাহায্য করে।

কম্পোনেন্টের টেম্পলেট

টেম্পলেট হলো Angular কম্পোনেন্টের HTML অংশ যা কম্পোনেন্টের UI (User Interface) তৈরি করে। Angular টেম্পলেট ব্যবহারকারীকে উপস্থাপন করতে ডাইনামিক ডেটা বাইন্ডিং, ইভেন্ট হ্যান্ডলিং এবং অন্যান্য টেম্পলেট সিনট্যাক্স প্রদান করে।

টেম্পলেট ডেকোরেটর

কম্পোনেন্টের টেম্পলেট ফাইলটি @Component ডেকোরেটরের মধ্যে templateUrl বা template প্রপার্টি দ্বারা উল্লেখ করা হয়। এই প্রপার্টির মাধ্যমে আপনি টেম্পলেট ফাইল সংযুক্ত করতে পারেন অথবা ইনলাইন HTML কোড দিতে পারেন।

• templateUrl: বাইরের HTML ফাইল সংযুক্ত করতে ব্যবহৃত হয়।
• template: ইনলাইন HTML কোড দেওয়ার জন্য ব্যবহৃত হয়।

টেম্পলেট উদাহরণ:

AppComponent-এর একটি টেম্পলেট উদাহরণ:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',  // বাইরের HTML টেম্পলেট ফাইল
  styleUrls: ['./app.component.css']    // স্টাইলস ফাইল
})
export class AppComponent {
  title = 'My Angular App';
}

app.component.html:

<div>
  <h1>{{ title }}</h1>
  <p>Welcome to the Angular app!</p>
</div>

এখানে:

• {{ title }} হলো Interpolation (ডেটা বাইন্ডিং) ব্যবহার করে title প্রোপার্টি টেম্পলেটে দেখানো হচ্ছে।

ইভেন্ট বাইন্ডিং এবং ডেটা বাইন্ডিং:

Angular এর টেম্পলেট এ ডেটা বাইন্ডিং এবং ইভেন্ট বাইন্ডিং ব্যবহৃত হয়।

• Interpolation (ডেটা বাইন্ডিং):

  <h1>{{ title }}</h1>
  

  এখানে title কম্পোনেন্টের প্রোপার্টি।

• Event Binding:

  <button (click)="changeTitle()">Change Title</button>
  

  এখানে (click) ইভেন্টের মাধ্যমে changeTitle() মেথড কল করা হচ্ছে।

• Property Binding:

  <img [src]="imageUrl">
  

  এখানে [src] প্রপার্টি বাইন্ডিং ব্যবহার করা হয়েছে imageUrl-কে।

• Two-way Binding:

  <input [(ngModel)]="name">
  

  এখানে [(ngModel)] দুই দিকের ডেটা বাইন্ডিং বাস্তবায়ন করছে।

কম্পোনেন্টের স্টাইলস

Angular কম্পোনেন্টের স্টাইলস কাস্টমাইজ করা হয় styleUrls বা styles প্রপার্টি ব্যবহার করে। styleUrls বাইরের সিএসএস ফাইল ব্যবহার করতে সাহায্য করে, এবং styles ইনলাইন স্টাইল দেওয়ার জন্য ব্যবহৃত হয়।

স্টাইল ফাইল ব্যবহার:

AppComponent-এর একটি স্টাইল ফাইল উদাহরণ:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']  // বাইরের স্টাইল ফাইল
})
export class AppComponent {
  title = 'My Angular App';
}

app.component.css:

h1 {
  color: blue;
}

p {
  font-size: 16px;
}

এখানে h1 এবং p ট্যাগের জন্য স্টাইল দেয়া হয়েছে।

ইনলাইন স্টাইল ব্যবহার:

আপনি যদি ইনলাইন স্টাইল ব্যবহার করতে চান, তবে styles প্রপার্টি ব্যবহার করতে পারেন:

@Component({
  selector: 'app-root',
  template: `<h1>{{ title }}</h1>`,
  styles: [`h1 { color: red; }`]
})
export class AppComponent {
  title = 'Inline Styled Angular App';
}

এখানে h1 এর স্টাইল ইনলাইনভাবে প্রদান করা হয়েছে।

কম্পোনেন্ট স্তরের স্টাইল স্কোপিং

Angular একটি এনক্যাপসুলেশন মেকানিজম প্রদান করে যার মাধ্যমে কম্পোনেন্টের স্টাইলস শুধুমাত্র ওই কম্পোনেন্টের টেম্পলেটে প্রযোজ্য হয়। এর ফলে, অন্য কম্পোনেন্টের স্টাইলগুলোর সাথে কনফ্লিক্ট হয় না। Angular এর ডিফল্ট স্টাইল এনক্যাপসুলেশন মোড হল Emulated, যা কম্পোনেন্টের স্টাইলসকে শুধুমাত্র ঐ কম্পোনেন্টের মধ্যে সীমাবদ্ধ রাখে।

স্টাইল এনক্যাপসুলেশন:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.Emulated  // ডিফল্ট এনক্যাপসুলেশন
})
export class AppComponent {
  title = 'Styled Angular App';
}

এছাড়াও, আপনি ViewEncapsulation এর মান পরিবর্তন করতে পারেন:

• None: স্টাইলস গ্লোবালি প্রযোজ্য হবে, অন্য কম্পোনেন্টের স্টাইলও প্রভাবিত হবে।
• ShadowDom: স্টাইলস শ্যাডো DOM ব্যবহার করবে, যা কম্পোনেন্টের স্টাইলকে সম্পূর্ণভাবে আলাদা রাখবে।

সারাংশ

Angular-এ কম্পোনেন্টের টেম্পলেট এবং স্টাইলস ব্যবহার করে আপনি ইউজার ইন্টারফেস ডিজাইন করতে পারেন এবং ডাইনামিক ডেটা উপস্থাপন করতে পারেন। টেম্পলেট ডেটা বাইন্ডিং, ইভেন্ট হ্যান্ডলিং, এবং কন্ডিশনাল রেন্ডারিংয়ের মাধ্যমে UI তৈরি করে, এবং স্টাইলস দিয়ে টেম্পলেটের ডিজাইন কাস্টমাইজ করা হয়। Angular এর স্টাইল এনক্যাপসুলেশন নিশ্চিত করে যে কম্পোনেন্টের স্টাইল শুধুমাত্র ওই কম্পোনেন্টের মধ্যে প্রযোজ্য হবে, যা অ্যাপ্লিকেশনের অন্যান্য অংশের সাথে কোনো কনফ্লিক্ট সৃষ্টি করে না।